<template>
    <div class="login_container">
        <!-- 登录表单-->
        <div class="login_form">
            <h3 class="title">稻草快速开发平台</h3>
            <el-form ref="formRef" :model="loginForm"> 
                <el-form-item>
                    <el-input v-model="loginForm.account" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon class="el-input_icon"><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon class="el-input_icon"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 记住我和忘记面 -->
                <div class="rememberMe">
                    <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
                    <el-text class="forgetpass mx-1" type="primary">忘记密码？</el-text>
                </div>
            </el-form>
            <!-- 分割线 -->
            <el-divider>其他登录方式</el-divider>
            <!-- 其他登录方式 -->
            <div class="other_login">
                <el-icon class="other_login_item"><ChromeFilled /></el-icon>
                <el-icon class="other_login_item"><Eleme /></el-icon>
                <el-icon class="other_login_item"><WindPower /></el-icon>
            </div>
            <el-button style="width: 60%;" type="primary" @click=handleLogin>登录</el-button>
        </div>
    </div>
</template>

<script setup>
    // 导入ref
    import {ref} from 'vue'
    // 导入login方法
    import { login } from '@/api/auth/index.js'
    // 导入menu方法
    import { searchSelfMenu } from '@/api/user/index.js'
    // 引入token工具类
    import { setToken } from '@/utils/token/index.js'
    // 引入 store
    import { useMenuStore } from '@/stores/menu.js'
    // 引入 router
    import { useRouter } from 'vue-router'
    // 声明表单绑定值
    const loginForm = ref({
        account: undefined,
        password: undefined,
        rememberMe: undefined
    })
    const menuStore = useMenuStore();
    const router = useRouter();
    // 登录方法
    function handleLogin() {
        login(loginForm.value).then((response) => {
            if(response.data.code == 200) {
                // 将token存储到sessionStorage中
                setToken("daocao_token", response.data.data)
                // TODO 查询用户的权限和菜单【设置页面路由实现动态路由】
                searchSelfMenu().then((response) => {
                    if (response.data.code == 200) {
                        // 将数据存储到pinia中
                        menuStore.setMenuList(response.data.data)
                        // 跳转到 /index
                        router.push('/index')
                    }
                })
            }
        })
    }
</script>

<style lang="scss" scoped>
.login_container {
    // 背景图
    background-image: url('../assets/bgimg/1.jpg');
    background-size: 100%;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    .login_form {
        display: flex;
        background-color: #fff;
        justify-content: center;
        align-items: center;
        // 设置换行
        flex-direction: column;
        width: 50%;

        .title {
            margin-bottom: 20px;
        }
        // 分割线
        .el-divider {
            width: 40%;
        }

        .other_login {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;

            .other_login_item {
                margin-right: 30px;
                cursor: pointer;
            }
        }
    }
}



.el-form {
    width: 60%;
}

.el-form-item {
    width: 100%;
}
.rememberMe {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .forgetpass {
        cursor: pointer;
    }
}

</style>